<!--订单搜索、添加订单、切换导航、订单列表 -->
<template>
	<div class="contact flex" id="order">
		<div class="information">
			<div class="topfixed">
				<div class="infosearch marginAuto">
					<!-- 可以根据订单名称和用户名称查找 -->
					<!-- <el-input class="infosearch-input" @change="searchOrderListfun" v-model="searchtxt"
						prefix-icon="el-icon-search" placeholder="搜索">
						<el-select style="width:130px;height:34px;" v-model="orderselectname" slot="prepend" placeholder="请选择" @change="orderselectfun">
						  <el-option v-for="(item,index) in orderselectdata" :key="index" :label="item.name" :value="item.id"></el-option>
						</el-select>
					</el-input> -->
					<el-input class="infosearch-input" @change="searchOrderListfun" v-model="searchtxt"
						prefix-icon="el-icon-search" placeholder="搜索" v-if="roleId == 2 || roleId == 6">
					</el-input>
					<el-input class="infosearch-input" @change="searchOrderListfun" v-model="searchtxt"
						prefix-icon="el-icon-search" placeholder="搜索" v-else>
					</el-input>
					<img class="infosearch-add curpoin" v-if="roleId == 2 || roleId == 6" @click="neworderis=true"
						src="@/assets/fun/add.png" alt="添加" />
				</div>
				<div class="ointnav marginAuto">
					<div class="ointnavmain flex curpoin">
						<div class="ointnaveach" @click="navacfun(-1)" :class="navac == -1 ? 'navactive':''">全部</div>
						<div class="ointnaveach" @click="navacfun(0)" :class="navac == 0 ? 'navactive':''"
							v-if="roleId == 2 || roleId == 3">待指派</div>
						<div class="ointnaveach" @click="navacfun(1)" :class="navac == 1 ? 'navactive':''">进行中</div>
						<div class="ointnaveach" @click="navacfun(3)" :class="navac == 3 ? 'navactive':''"
							v-if="roleId == 7">团队订单</div>
						<div class="ointnaveach" @click="navacfun(2)" :class="navac == 2 ? 'navactive':''">已定稿</div>
						<div class="ointnaveach" @click="navacfun(41)" :class="navac == 41 ? 'navactive':''">暂停</div>
						<div class="ointnaveach" @click="navacfun(5)" :class="navac == 5 ? 'navactive':''">退款中</div>
						<div class="ointnaveach" @click="navacfun(6)" :class="navac == 6 ? 'navactive':''">已退款</div>
						<div class="ointnaveach" @click="navacfun(7)" :class="navac == 7 ? 'navactive':''">售后中</div>
						<div class="ointnaveach" @click="navacfun(4)" :class="navac == 4 ? 'navactive':''">投诉单</div>
						<div class="ointnaveach" @click="navacfun(31)" :class="navac == 31 ? 'navactive':''">死单</div>
					</div>
				</div>
			</div>
			<div class="ointblock marginAuto" @scroll="ointsescrollfun">
				<div class="ointeach" v-for="(item,index) in ointdata" :key="index" @click="ointsefun(item,index)"
					:class="ointdataac == item.id ? 'activeointeach':''">
					<img class="ointeachbricon" src="@/assets/fun/ointicon.png" alt="图标" />
					<img class="ointeachbricon" v-if="ointdataac == item.id"
						style="width:32px;height:32px;right:3px;bottom:3px;" src="@/assets/fun/ointicon.png" alt="图标" />
					<div class="ointeacht mainColor flex" style="justify-content: space-between;">
						<p>
							<span style="display:inline-block;">{{ item.order_sn }}</span>
							<span>{{ item.order_status_txt }}</span>
							<span v-if="item.is_urgent == 1">加急</span>
							<span v-if="item.replenish_need">补充需求</span>
						</p>
						<p class="curpoin" v-if="item.create_uid == userinfo.user_id && item.order_status == 0"
							@click.stop="delorderfun(item,index)">删除</p>
					</div>
					<div class="ointeachb">
						<div class="ointeachbtitle ellipsis01">{{ item.order_name }}</div>
						<div class="ointeachbdec ellipsis02" v-html="item.design_need"></div>
					</div>
				</div>
				<div class="loadingicon" v-if="isloadingicon" style="height:20px;text-align:center;"><span
						class="el-icon-loading" style="font-size:22px;"></span></div>
			</div>
		</div>
		<!-- 订单详情 -->
		<el-dialog id="createorder" title="订单详情" :visible.sync="isorderxq" width="740px" top="20px"
			:before-close="neworderClosefun" :modal-append-to-body="false">
			<div class="rblock">
				<orderxq :orderitem="orderitem" ref="orderxq"></orderxq>
			</div>
		</el-dialog>
		<!-- 创建新订单 -->
		<el-dialog id="createorders" title="创建新订单" :visible.sync="neworderis" width="500px" top="70px"
			:before-close="neworderClosefun" :modal-append-to-body="false">
			<div class="eyeach flex">
				<p class="eyeachtitle">客户编号：</p>
				<div class="eyeachr">
					<el-input class="eyeachrinput" v-model="mobile" placeholder="请输入客户编号"></el-input>
				</div>
			</div>
			<div class="eyeach flex">
				<p class="eyeachtitle">订单名称：</p>
				<div class="eyeachr">
					<el-input class="eyeachrinput" v-model="order_name" placeholder="请输入订单名称"></el-input>
				</div>
			</div>
			<div class="eyeach flex">
				<p class="eyeachtitle">订单金额：</p>
				<div class="eyeachr">
					<el-input class="eyeachrinput" v-model="order_amount" placeholder="请输入订单金额"></el-input>
				</div>
			</div>

			<div class="eyeach flex">
				<p class="eyeachtitle">设计需求：</p>
				<div class="eyeachr">
					<textarea class="eyeachrneed" v-model="design_need" placeholder="设计需求"></textarea>
				</div>
			</div>
			<div class="eyeach flex" v-if="roleId == 2">
				<p class="eyeachtitle">销售人员：</p>
				<div class="eyeachr">
					<el-select style="width:100%;" v-model="xsacname" placeholder="请选择" @change="xsacfun">
						<el-option v-for="(item,index) in xslistdata" :key="index" :label="item.realname"
							:value="item.user_id">
						</el-option>
					</el-select>
				</div>
			</div>
			<div class="eyeach flex">
				<p class="eyeachtitle">设计类型：</p>
				<div class="eyeachr">
					<el-select style="width:100%;" v-model="designArracname" placeholder="请选择" @change="designArracfun">
						<el-option v-for="(item,index) in creaorderopdata.designArr" :key="index" :label="item.name"
							:value="item.id">
						</el-option>
					</el-select>
				</div>
			</div>

			<div class="eyeach flex">
				<p class="eyeachtitle">业务类型：</p>
				<div class="eyeachr">
					<el-select style="width:100%;" v-model="businessArracname" placeholder="请选择"
						@change="businessArracfun">
						<el-option v-for="(item,index) in creaorderopdata.businessArr" :key="index" :label="item.name"
							:value="item.id">
						</el-option>
					</el-select>
				</div>
			</div>
			<div class="eyeach flex">
				<p class="eyeachtitle">设计项目：</p>
				<div class="eyeachr">
					<el-select style="width:100%;" v-model="programArracname" filterable placeholder="请选择"
						@change="programArracfun">
						<el-option v-for="(item,index) in creaorderopdata.programArr" :key="index" :label="item.name"
							:value="item.id">
						</el-option>
					</el-select>
				</div>
			</div>
			<div class="eyeach flex">
				<p class="eyeachtitle">订单状态：</p>
				<div class="eyeachr">
					<el-select style="width:100%;" v-model="orderstatusacname" placeholder="请选择"
						@change="orderstatusacfun">
						<el-option v-for="(item,index) in orderstatusdata" :key="index" :label="item.name"
							:value="item.id">
						</el-option>
					</el-select>
				</div>
			</div>
			<div class="eyeach flex">
				<p class="eyeachtitle">开票信息：</p>
				<div class="eyeachr">
					<el-select style="width:100%;" v-model="invoiceacname" placeholder="请选择" @change="invoiceacfun">
						<el-option v-for="(item,index) in invoicedata" :key="index" :label="item.name" :value="item.id">
						</el-option>
					</el-select>
				</div>
			</div>
			<div class="eyeach flex">
				<p class="eyeachtitle">代收款返还：</p>
				<div class="eyeachr">
					<el-select style="width:100%;" v-model="returnacname" placeholder="请选择" @change="returnacnameacfun">
						<el-option v-for="(item,index) in returndata" :key="index" :label="item.name" :value="item.id">
						</el-option>
					</el-select>
				</div>
			</div>
			<div class="eyeach flex" v-if="returnacid == 1">
				<p class="eyeachtitle">代收款金额：</p>
				<div class="eyeachr">
					<el-input class="eyeachrinput" v-model="due_in_amount" placeholder="请输入代收款金额"></el-input>
				</div>
			</div>
			<div class="eyeach flex">
				<p class="eyeachtitle">备注：</p>
				<div class="eyeachr">
					<textarea class="eyeachrneed" v-model="remark" placeholder="请输入备注"></textarea>
				</div>
			</div>
			<div class="eyeach flex">
				<p class="eyeachtitle">尾款：</p>
				<div class="eyeachr">
					<el-input class="eyeachrinput" v-model="residue_amount" placeholder="请输入尾款"></el-input>
				</div>
			</div>

			<div class="eyeach flex">
				<p class="eyeachtitle">付款方式：</p>
				<div class="eyeachr">
					<el-select style="width:100%;" v-model="payArracname" placeholder="请选择" @change="payArracfun"
						filterable>
						<el-option v-for="(item,index) in creaorderopdata.payArr" :key="index" :label="item.name"
							:value="item.id">
						</el-option>
					</el-select>
				</div>
			</div>
			<div class="eyeach flex">
				<p class="eyeachtitle">是否加急：</p>
				<div class="eyeachr">
					<el-select style="width:100%;" v-model="urgentacname" placeholder="请选择" @change="urgentacfun">
						<el-option v-for="(item,index) in urgentdata" :key="index" :label="item.name" :value="item.id">
						</el-option>
					</el-select>
				</div>
			</div>
			<div class="eyeach flex" v-for="(item,index) in orderarrdata">
				<p class="eyeachtitle">{{ item.name }}：</p>
				<div class="eyeachr">
					<el-input class="eyeachrinput" v-model="item.fieldtxt" :placeholder="`请输入${item.name}`"></el-input>
				</div>
			</div>

			<div v-if="invoiceacid == 1">
				<div class="eyeach flex">
					<p class="eyeachtitle">开票信息：</p>
				</div>
				<div class="eyeach flex">
					<p class="eyeachtitle">开票对应公司：</p>
					<div class="eyeachr">
						<el-input class="eyeachrinput" v-model="invoice_company" placeholder="请输入开票对应公司"></el-input>
					</div>
				</div>
				<div class="eyeach flex">
					<p class="eyeachtitle">开票金额：</p>
					<div class="eyeachr">
						<el-input class="eyeachrinput" v-model="invoice_amount" placeholder="请输入开票金额"></el-input>
					</div>
				</div>
				<div class="eyeach flex">
					<p class="eyeachtitle">开票公司信息：</p>
					<div class="eyeachr">
						<el-input class="eyeachrinput" v-model="invoice_company_info"
							placeholder="请输入开票公司信息"></el-input>
					</div>
				</div>
				<div class="eyeach flex">
					<p class="eyeachtitle">开票人姓名：</p>
					<div class="eyeachr">
						<el-input class="eyeachrinput" v-model="invoice_name" placeholder="请输入开票人姓名"></el-input>
					</div>
				</div>
				<div class="eyeach flex">
					<p class="eyeachtitle">税号：</p>
					<div class="eyeachr">
						<el-input class="eyeachrinput" v-model="invoice_no" placeholder="请输入税号"></el-input>
					</div>
				</div>
				<div class="eyeach flex">
					<p class="eyeachtitle">注册地址：</p>
					<div class="eyeachr">
						<el-input class="eyeachrinput" v-model="invoice_address" placeholder="请输入注册地址"></el-input>
					</div>
				</div>
				<div class="eyeach flex">
					<p class="eyeachtitle">联系电话：</p>
					<div class="eyeachr">
						<el-input class="eyeachrinput" v-model="invoice_tel" placeholder="请输入联系电话"></el-input>
					</div>
				</div>
				<div class="eyeach flex">
					<p class="eyeachtitle">开户行：</p>
					<div class="eyeachr">
						<el-input class="eyeachrinput" v-model="invoice_bank" placeholder="请输入开户行"></el-input>
					</div>
				</div>
				<div class="eyeach flex">
					<p class="eyeachtitle">开户行行号：</p>
					<div class="eyeachr">
						<el-input class="eyeachrinput" v-model="invoice_bank_code" placeholder="请输入开户行行号"></el-input>
					</div>
				</div>
				<div class="eyeach flex">
					<p class="eyeachtitle">银行账号：</p>
					<div class="eyeachr">
						<el-input class="eyeachrinput" v-model="invoice_bank_card" placeholder="请输入银行账号"></el-input>
					</div>
				</div>
			</div>
			<div class="uploadbtn flex" style="margin-top:20px;">
				<div class="uploadbtneach curpoin flex" @click="uploadfilekindfun(1)">
					<img class="uploadbtneachimg" src="@/assets/fun/uploadicon.png" alt="" />
					<span class="uploadbtneachtxt mainColor">上传设计需求文件</span>
				</div>
				<div class="uploadbtneach curpoin flex" @click="uploadfilekindfun(2)">
					<img class="uploadbtneachimg" src="@/assets/fun/uploadicon.png" alt="" />
					<span class="uploadbtneachtxt mainColor">上传备注文件</span>
				</div>
			</div>
			<div class="replacebtn" style="margin-top:20px;">
				<el-button class="replacebtneach" style="background-color:#999999;"
					@click="neworderis=false;clear()">取消</el-button>
				<el-button class="replacebtneach mainbg" @click="newordernterfun()">提交</el-button>
			</div>
		</el-dialog>
		<el-dialog :close-on-click-modal="false" :title="uploadskind == 1 ? '上传设计需求文件':'上传备注文件'" id="orderuploadfile"
			:visible.sync="uploadsjxqis" width="400px" top="70px" :before-close="uploadClosefun"
			:modal-append-to-body="false">
			<div v-loading="fileLoading" element-loading-text="文件上传中，请勿操作" element-loading-spinner="el-icon-loading"
				element-loading-background="rgba(255, 255, 255, 0.6)">
				<el-upload id="uploadfliexq" drag multiple :show-file-list="false"
					:action="apifun.hrefURL + '/pc/Upload/fileUpload'" name="file" :headers="token"
					:on-success="uploadfileSuccess" :before-upload="uploadfile.fileSize" :on-progress="onProgressFile">
					<i class="el-icon-upload"></i>
					<div class="el-upload__text">将文件拖到此处，或<em class="mainColor">点击上传</em></div>
					<div class="el-upload__tip" slot="tip">上传的文件不超过{{ uploadfile.fileSizenum }}M</div>
				</el-upload>
				<br>
				<el-progress :percentage="filePer" color="#FF5E03" v-if="filePer>0"></el-progress>
				<div class="flielist">
					<div class="flieitem flex" v-for="(item,index) in uploadsjxqdata" :key="index">
						<div class="flieiteml">
							<span class="flieitemlicon el-icon-document"></span>
							<span class="flieitemlname">{{ item.name }}</span>
						</div>
						<div class="flieitemr curpoin" @click="delsjxqfun(item,index)">
							<span class="el-icon-delete"></span>
						</div>
					</div>
				</div>
			</div>
			<!-- <div class="replacebtn" style="margin-top:20px;">
			   <el-button class="replacebtneach mainbg" @click="uploadsjxqisfun()">完成</el-button>
			</div> -->
		</el-dialog>
		<!-- <el-dialog  
			:modal="false"
		  title="公告"
		  :visible.sync="isnotice"
		  width="432px"
		  top="140px"
		  :before-close="replaceClosefun"
		  :modal-append-to-body="false">
		  <noticelist></noticelist>
		</el-dialog> -->
	</div>
</template>

<script>
	import orderxq from '@/components/order/orderxq';
	import noticelist from '@/components/chat/noticelist';
	export default {
		components: {
			orderxq,
			noticelist
		},
		data() {
			return {
				isnotice: false,
				token: {
					Authorization: localStorage.getItem('token')
				},
				isorderxq: false,
				roleId: '',
				userinfo: {},
				page: 1,
				limit: 10,
				isshake: true,
				isloadingicon: false,
				searchtxt: '',
				orderselectdata:[
					{name: "订单名称",id: "0"},
					{name: "用户名称",id: "1"},
				],
				orderselectname:'订单名称',
				orderselectid:0,
				navac: -1,
				ointdata: [], // 订单列表
				ointdataac: '',
				orderitem: {},
				neworderis: false, // 创建新订单
				creaorderopdata: {},
				mobile: '',
				order_name: '',
				order_amount: '',
				due_in_amount: '',
				design_need: '',
				designArracname: '',
				designArracid: '',
				businessArracname: '',
				businessArracid: '',
				programArracname: '',
				programArracid: '',
				orderstatusdata: [{
					name: "未分配",
					id: "0"
				}, {
					name: "进行中",
					id: "1"
				}, {
					name: "已定稿",
					id: "2"
				}, {
					name: "死单",
					id: "3"
				}, {
					name: "暂停",
					id: "4"
				}, {
					name: "退款中",
					id: "5"
				}, {
					name: "已退款",
					id: "6"
				}],
				orderstatusacname: '',
				orderstatusacid: '',
				invoicedata: [{
					name: "不开票",
					id: "0"
				}, {
					name: "开票",
					id: "1"
				}],
				invoiceacname: '',
				invoiceacid: '', // 开票信息
				returndata: [{
					name: "否",
					id: "0"
				}, {
					name: "是",
					id: "1"
				}],
				returnacname: '',
				returnacid: '',
				remark: '',
				residue_amount: '', // 尾款
				payArracname: "",
				payArracid: '',
				urgentdata: [{
					name: "不加急",
					id: "0"
				}, {
					name: "加急",
					id: "1"
				}],
				urgentacname: '',
				urgentacid: '',
				design_need_file: [], //  需求文件 
				remark_files: [], // 备注文件
				invoice_company: '', // 开票对应公司 （下面开票信息部分）
				invoice_amount: '',
				invoice_company_info: '',
				invoice_name: '',
				invoice_no: '',
				invoice_address: '',
				invoice_tel: '',
				invoice_bank: '',
				invoice_bank_code: '',
				invoice_bank_card: '',
				xslistdata: [],
				xsacname: '',
				sale_id: '', // 销售id （销售总监提交时必传）
				uploadsjxqis: false, // 上传文件
				uploadskind: '', // 1需求文件 、2备注文件
				uploadsjxqdata: [], // 保存上传文件临时文件
				orderarrdata: [],
				filePer: 0,
				fileLoading: false
			}
		},
		mounted() {
			this.roleId = this.$store.state.roleId;
			this.userinfo = this.$store.state.UserInfo;
			this.getCreaOrderOption(); // 创建订单选项
			if (this.roleId == 2) {
				this.getdesigner(); // 销售成员
			}
			this.page = 1;
			this.ointdata = [];
			this.getOrderListfun(); // 获取订单列表
			this.getOrderArrfun();
		},
		methods: {
			orderselectfun(e){  // 搜索类型
				this.orderselectid = e;
			},
			/*上传进度条、遮罩层-start*/
			waitTime() {
				this.$message({
					message: '请上传文件或等待上传反馈',
					type: 'warning'
				});
			},
			sucTime() {
				// this.$message({
				// 	message: '上传成功',
				// 	type: 'success'
				// });
			},
			onProgressFile(event, file, fileList) {
				this.filePer = Number(Number(event.percent).toFixed(0))
				if (event.percent > 0) {
					this.fileLoading = true
					if (event.percent == 100) {
						this.fileLoading = false
					}
				}
			},
			/*上传进度条、遮罩层-end*/
			replaceClosefun() {
				this.isnotice = false
			},
			newordernterfun() { // 新订单提交
				let design_need_file = [];
				let remark_files = [];
				this.design_need_file.forEach((item, index) => {
					design_need_file.push(item.id)
				});
				this.remark_files.forEach((item, index) => {
					remark_files.push(item.id)
				});
				let sendData = {
					mobile: this.mobile,
					order_name: this.order_name,
					order_amount: this.order_amount,
					due_in_amount: this.due_in_amount,
					design_need: this.design_need,
					design_type: this.designArracid,
					business_type: this.businessArracid,
					program_id: this.programArracid,
					order_status: this.orderstatusacid,
					is_invoice: this.invoiceacid, // 开票信息 0不开  1开
					due_in_refund: this.returnacid,
					remark: this.remark,
					pay_type: this.payArracid,
					is_urgent: this.urgentacid,
					residue_amount: this.residue_amount,
					design_need_file: design_need_file, // 需求文件
					remark_file_id: remark_files, // 备注文件
					invoice_company: this.invoice_company,
					invoice_amount: this.invoice_amount,
					invoice_company_info: this.invoice_company_info,
					invoice_name: this.invoice_name,
					invoice_no: this.invoice_no,
					invoice_address: this.invoice_address,
					invoice_tel: this.invoice_tel,
					invoice_bank: this.invoice_bank,
					invoice_bank_code: this.invoice_bank_code,
					invoice_bank_card: this.invoice_bank_card
				};
				this.orderarrdata.forEach((item, index) => {
					sendData[item.field] = item.fieldtxt;
				});
				let urls = "/pc/Order/estOrder"; // 销售员
				if (this.roleId == 2) {
					sendData.sale_id = this.sale_id;
				};
				this.apifun.$post(urls, sendData).then((res) => {
					// console.log(res)
					if (res.code == 200) {
						this.$message({
							message: '创建成功',
							type: 'success'
						});
						this.neworderis = false;
						this.page = 1;
						this.ointdata = [];
						this.ointdataac = '';
						this.orderitem = {};
						this.clear()
						this.getOrderListfun();
					}
				})
			},
			clear() {
				this.mobile = "";
				this.order_name = "";
				this.order_amount = "";
				this.due_in_amount = "";
				this.design_need = "";
				this.designArracid = "";
				this.designArracname = "";
				this.businessArracid = "";
				this.businessArracname = "";
				this.programArracid = "";
				this.programArracname = "";
				this.orderstatusacid = "";
				this.orderstatusacname = "";
				this.invoiceacid = ""; // 开票信息 0不开  1开
				this.invoiceacname = "";
				this.returnacid = "";
				this.returnacname = "";
				this.remark = "";
				this.payArracid = "";
				this.payArracname = "";
				this.urgentacid = "";
				this.urgentacname = "";
				this.residue_amount = "";
				this.design_need_file = []; // 需求文件
				this.remark_files = []; // 备注文件
				this.invoice_company = "";
				this.invoice_amount = "";
				this.invoice_company_info = "";
				this.invoice_name = "";
				this.invoice_no = "";
				this.invoice_address = "";
				this.invoice_tel = "";
				this.invoice_bank = "";
				this.invoice_bank_code = "";
				this.invoice_bank_card = "";
			},
			neworderClosefun() { // 关闭
				this.neworderis = false; // 关闭添加订单
				this.isorderxq = false;
				this.orderitem = {};
				this.ointdataac = '';
				this.clear()
				// 待指派订单中如果指派过；该订单需要消失
				if(this.navac == 0){
					this.getorderxq(this.ointdataac);
				}
			},
			getorderxq(id){
				this.apifun.$post('/pc/Order/orderDetails', {
					id:id
				}).then((res) => {
					let datas = res.data;
					if(datas.order_status != 0){
						this.ointdata.forEach((item,index)=>{
							if(item.id == id){
								this.ointdata.splice(index,1)
							}
						})
					}
				})
			},
			getCreaOrderOption() { // 获取创建订单时的选项
				this.apifun.$post('/pc/Order/getCreateOrderOptionArr', {}).then((res) => {
					// console.log(res)
					if (res.code == 200) {
						this.creaorderopdata = res.data;
						/* designArr  设计类型、  businessArr 业务类型、  payArr 付款方式、 programArr 设计项目  
						designerArr  //设计师  saleArr  //销售  { "user_id": 139, "realname": "新增销售测试" }
						*/
					}
				})
			},
			xsacfun(e) {
				this.sale_id = e;
			},
			designArracfun(e) { // 选择设计类型
				this.designArracid = e;
			},
			businessArracfun(e) {
				this.businessArracid = e;
			},
			programArracfun(e) {
				this.programArracid = e;
			},
			orderstatusacfun(e) {
				this.orderstatusacid = e;
			},
			payArracfun(e) {
				this.payArracid = e;
			},
			returnacnameacfun(e) {
				this.returnacid = e;
				if (this.returnacid == 0) {
					this.due_in_amount = 0;
				};
			},
			urgentacfun(e) {
				this.urgentacid = e;
			},
			invoiceacfun(e) {
				this.invoiceacid = e;
			},
			// ---上传设计文件
			uploadfileSuccess(res, file) { // 上传文件 
				let sendData = {
					raw: file.raw, // name、path、size、type、uid
					name: file.name,
					id: res.data
				};
				if (res.code == 200) {
					this.uploadsjxqdata.unshift(sendData); // 设计需求
				} else {
					this.$message({
						message: res.msg,
						type: 'warning'
					});
				}
			},
			delsjxqfun(item, index) { // 删除设计需求
				this.uploadsjxqdata.splice(index, 1)
			},
			uploadfilekindfun(type) { // 上传文件类别
				let kinddata = type == 1 ? this.design_need_file : this.remark_files;
				this.uploadsjxqdata = kinddata;
				this.uploadskind = type;
				this.uploadsjxqis = true;
				this.filePer = 0
				this.fileLoading = false
			},
			// uploadsjxqisfun(){  //  完成  (1需求文件  2备注文件)
			// 	if(this.uploadsjxqdata.length <= 0){
			// 		this.$message({
			// 		  message: '您还没有上传任何文件',
			// 		  type: 'warning'
			// 		});
			// 		return false
			// 	};
			// 	if(this.uploadskind == 1){
			// 		this.design_need_file = this.uploadsjxqdata;
			// 	}else{
			// 		this.remark_files = this.uploadsjxqdata
			// 	}
			// 	this.uploadsjxqis = false;
			// },
			uploadClosefun() {
				this.uploadsjxqis = false;
			},
			delorderfun(item, index) { //  删除订单（只能删除自己创建的订单；且未分配状态）
				let sendData = {
					id: item.id
				}
				this.$alert('确认要删除此订单吗？', '删除订单', {
					confirmButtonText: '确定',
					closeOnClickModal: true,
					callback: action => {
						if (action == 'confirm') {
							this.apifun.$post('/pc/order/delOrder', sendData).then((res) => {
								// console.log(res)
								if (res.code == 200) {
									this.ointdata.splice(index, 1)
								}
							})
						}
					}
				});
			},
			// 基础fun
			navacfun(type) {
				if (type == this.navac) return false;
				this.navac = type;
				this.page = 1;
				this.ointdata = [];
				this.ointdataac = '';
				this.orderitem = {};
				this.getOrderListfun();
			},
			ointsefun(item, index) { // 切换指派列表
				this.isorderxq = true;
				this.ointdataac = item.id;
				this.orderitem = item;
				setTimeout(() => {
					this.$refs.orderxq.getorderxqfun(this.navac);
				})
			},
			ointsescrollfun(event) {
				const {
					scrollTop,
					scrollHeight,
					clientHeight
				} = event.target;
				if (this.isloadingicon) return;
				if (scrollTop + clientHeight >= scrollHeight - 10) { // 留10px加载
					if (this.isshake) {
						this.isshake = false;
						this.page++;
						this.getOrderListfun();
					}
				}
			},
			searchOrderListfun() { // 搜索订单
				this.page = 1;
				this.ointdata = [];
				this.ointdataac = '';
				this.orderitem = {};
				this.getOrderListfun();
			},
			getOrderListfun() { // 获取订单列表  //type=》  0全部 1待指派 2进行中 3团队订单 4投诉单 5已完成
				let sendData = {
					keyword: this.searchtxt,
					page: this.page,
					limit: this.limit,
					is_complaint: '',
					type:this.orderselectid,   // 0订单 1用户名
				};
				let orderstatus = '';
				if (this.navac == -1) {
					sendData.order_status = '';
				} else if (this.navac == 31) {
					sendData.order_status = 3;
				} else if (this.navac == 41) {
					sendData.order_status = 4;
				} else if (this.navac == 3) {
					sendData.order_status = 10000
				} else if (this.navac == 4) {
					sendData.order_status = ''
					sendData.is_complaint = 1 // 1投诉 
				} else {
					sendData.order_status = this.navac
				}
				// console.log(sendData)
				this.isloadingicon = true;
				this.apifun.$post('/pc/Order/orderList', sendData).then((res) => {
					// console.log(res)
					this.isloadingicon = false;
					this.isshake = true;
					if (res.code == 200) {
						let datas = res.data;
						if (datas.data.length <= 0) {
							this.page--;
							this.isshake = false;
							return false
						};
						this.ointdata = [...this.ointdata, ...datas.data];
					}
				})
			},
			getOrderArrfun() { //  获取附加功能
				this.apifun.$post('/pc/order/getOrderFieldArr', {}).then((res) => {
					// console.log(res)
					if (res.code == 200) {
						res.data.forEach((item, index) => {
							item.fieldtxt = '';
						});
						this.orderarrdata = res.data;
					}
				})
			},
			getdesigner() { // 获取销售成员
				this.apifun.$post('/pc/order/designer', {}).then((res) => {
					// console.log(res)
					if (res.code == 200) {
						let datas = res.data;
						this.xslistdata = datas;
					}
				})
			}
		}
	}
</script>
<style>
	#order .infosearch-input .el-input__inner {
		background-color: #FFF6F1;
		height: 38px;
		line-height: 38px;
	}

	#order .infosearch-input .el-input__inner:focus,
	#order .replaceisselect .el-input__inner:focus {
		border-color: #FF5E03;
	}

	#order .replaceisselect .el-input__inner {
		background-color: #F6F6F6;
		height: 50px;
		line-height: 50px;
	}

	#order .eyeach .el-input__inner {
		height: 30px;
		line-height: 30px;
		border: none;
	}

	#createorder .el-dialog__body {
		padding: 0 20px 30px !important;
	}

	#createorders .el-dialog__body {
		padding: 0 20px 30px !important;
	}

	#orderuploadfile .el-dialog__body {
		padding: 0 20px 20px !important;
	}

	#uploadfliexq .el-upload-dragger:hover {
		border-color: var(--mainColor);
	}

	#uploadfliexq .el-upload-dragger {
		border-color: var(--mainColor);
	}
</style>
<style scoped lang="scss">
	.information {
		position: relative;
		z-index: 50;
		flex: 1;
		height: 98vh;
		overflow-y: auto;
		background-color: #fff;
		border-right: 1px solid #EBEBEB;
	}

	.topfixed {
		position: sticky;
		z-index: 100;
		top: 0;
		left: 0;
		flex: 1;
		background-color: #fff;
	}

	// 搜索
	.infosearch {
		z-index: 100;
		width: 85%;
		height: 38px;

		.infosearch-input {
			width: 100%;
			height: 38px;
			border: none;
			margin-top: 5px;
		}

		.infosearch-add {
			position: absolute;
			top: 8px;
			right:30px;
			width: 32px;
			height: 32px;
		}
	}

	// nav导航
	.ointnav {
		width: 90%;

		.ointnavmain {
			width: 650px;
			margin: auto;
			justify-content: space-between;
			padding: 20px 0 10px;

			.ointnaveach {
				position: relative;
				height: 22px;
				color: #333333;
				font-weight: bold;
				font-size: 14px;
				margin-right: 10px;
			}

			.ointnaveach:hover {
				color: var(--mainColor);
			}

			.ointnaveach::before {
				position: absolute;
				bottom: -4px;
				display: block;
				content: "";
				width: 100%;
				height: 6px;
				background-color: #fff;
				border-radius: 100px;
			}

			.navactive {
				color: var(--mainColor);
			}

			.navactive::before {
				background-color: var(--mainColor);
			}
		}
	}

	// 指派列表
	.ointblock {
		height: 80vh;
		padding-top: 20px;
		overflow-y: auto;

		.ointeach:hover {
			background-color: var(--bgColor);
		}

		.ointeach {
			position: relative;
			width: 94%;
			padding: 0 1%;
			margin: 10px auto 0;
			border-radius: 10px;

			.ointeachbricon {
				position: absolute;
				bottom: 7px;
				right: 7px;
				width: 16px;
				height: 16px;
			}

			.ointeacht {
				width: 95%;
				margin: auto;
				padding: 0 10px;
				height: 40px;
				line-height: 40px;
				border-bottom: 1px solid #EEEEEE;
				font-size: 14px;

				span {
					margin-right: 20px;
				}
			}

			.ointeachb {
				padding: 5px 15px;
				line-height: 30px;
				color: #333;

				.ointeachbtitle {
					font-weight: bold;
					font-size: 14px;
				}

				.ointeachbdec {
					font-size: 14px;
					white-space: pre-wrap;  //只对中文起作用
					// word-wrap: break-word;  // 只对英文起作用，以单词作为换行依据
					word-break: break-all;  // 只对英文起作用，以字母作文换行依据（长链接需要这个）
				}
			}
		}

		.activeointeach {
			background-color: var(--bgColor);
		}
	}

	.rblock {
		position: relative;
		flex: 1;
		height: 86vh;
		z-index: 99;
		background-color: #F7F7F7;
		overflow-y: auto;
	}

	// 弹窗
	.replacebtn {
		margin-top: 30px;
		display: flex;
		justify-content: flex-end;

		.replacebtneach {
			width: 130px;
			height: 50px;
			border-radius: 10px;
			color: #fff;
			font-size: 16px;
			margin-left: 25px;
		}
	}

	// --创建新订单
	.eyeach {
		justify-content: space-between;

		.eyeachtitle {
			line-height: 30px;
			color: #333333;
			font-size: 14px;
		}

		.eyeachr {
			width: 75%;
			line-height: 30px;

			.eyeachrinput {
				height: 30px;
				line-height: 30px;
			}

			.eyeachrneed {
				width: 85%;
				height: 80px;
				padding: 10px;
				border-radius: 5px;
				border: none;
				outline: none;
				resize: none;
				line-height: 16px;
				background-color: #F7F7F7;
				color: #333;
				font-size: 12px;
			}
		}
	}

	.uploadbtn {
		justify-content: flex-end;

		.uploadbtneach {
			margin-left: 10px;
			border: 1px solid var(--mainColor);
			padding: 10px;
			border-radius: 10px;

			.uploadbtneachimg {
				width: 20px;
				height: 20px;
				margin-top: 4px;
			}

			.uploadbtneachtxt {
				line-height: 30px;
				margin-left: 8px;
			}
		}
	}

	// 上传文件list
	.flielist {
		margin-top: 10px;

		.flieitem {
			justify-content: space-between;
			line-height: 30px;
			padding: 0 10px;
			border-radius: 5px;

			.flieiteml {
				.flieitemlicon {
					font-size: 16px;
				}

				.flieitemlname {
					font-size: 14px;
					margin-left: 8px;
				}
			}

			.flieitemr {
				width: 30px;
				text-align: center;
				font-size: 16px;
				color: #999;
				text-align: right;
			}
		}

		.flieitem:hover {
			background-color: #F7F7F7;
		}
	}
</style>